<template>
  <view class="project-info-title">
    <view class="title-box">
      <view class="title">
        <view class="content">{{ projectName }}</view>
        <view v-if="!online" class="status-offline">离线</view>
      </view>
    </view>
    <view class="tab-box">
      <view
        v-for="item in tabList"
        :key="item.code"
        class="tab-item"
        :class="{ active: item.code === activeTab }"
        @click="toggleTab(item)">
        <i class="tab-icon iconfont" :class="item.icon"></i>
        <view class="tab-name">{{ item.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { PROJECT_TAB } from '@/constant/index.js'
export default {
  name: 'project-info-title',
  props: {
    projectName: {
      type: String
    },
    online: {
      type: Boolean,
      default: true
    },
    activeTab: {
      type: String
    }
  },
  data() {
    return {
      tabList: [
        {
          name: '项目信息',
          icon: 'icon-project-info',
          code: PROJECT_TAB.INFO
        },
        {
          name: '灯具详情',
          icon: 'icon-lamp',
          code: PROJECT_TAB.LAMP
        },
        {
          name: '网关管理',
          icon: 'icon-gateway',
          code: PROJECT_TAB.GATEWAY
        },
        {
          name: '数据采集器',
          icon: 'icon-meter',
          code: PROJECT_TAB.METER
        },
        {
          name: '项目成员',
          icon: 'icon-members',
          code: PROJECT_TAB.MEMBERS
        }
      ]
    };
  },
  methods: {
    toggleTab(tab) {
      const self = this
      if (self.activeTab === tab.code) {
        return
      }
      self.$emit('toggleTab', tab.code)
    }
  }
};
</script>

<style lang="scss" scoped>
.project-info-title {
  background-color: $white;
  .title-box {
    margin-bottom: 30rpx;
    padding: 0 30rpx;
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10rpx;
      .content {
        display: inline-block;
        max-width: 540rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: $font-size-6;
      }
      .status-offline {
        margin-left: 4rpx;
        color: $danger;
        font-size: $font-size-0;
        height: 30rpx;
        display: inline-flex;
        align-items: center;
        padding: 0 10rpx;
        border-radius: 6rpx;
      }
    }
  }
  .tab-box {
    padding: 0 30rpx 20rpx;
    display: flex;
    justify-content: space-between;
    gap: 20rpx;
    .tab-item {
      border-radius: 10rpx;
      border: 2rpx solid $background-base;
      background-color: $background-base;
      position: relative;
      text-align: center;
      padding: 16rpx 4rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &.active {
        border-color: $primary;
        background-color: rgba($primary, .1);
        color: $primary;
      }
      .tab-icon {
        font-size: 48rpx;
      }
      .tab-name {
        margin-top: 10rpx;
        font-size: 22rpx;
      }
    }
  }
}
</style>
